<template>
    <Wrapper :labelWidth="labelWidth" :noPadding="true" :isTpl="isTpl">
        <div class="flex-box noBorder">
            <div class="flex-row m noBorder">
                <img v-if="!isTpl && logoPath" class="logo-img" :src="getFullPath(logoPath)" />
                <span v-else class="logo">logo</span>
            </div>
            <div class="flex-row m noBorder" style="padding:var(--sPadding) var(--mPadding);">
                <div v-if="isTpl" class="code-img"><img :src="CodeImg" /></div>
                <SVGBarCode v-else :info="info" :labelWidth="labelWidth" @passCode="value=>$emit('passCode', value)" />
            </div>
            <div class="flex-row l noBorder hasBg bottomRadius">
                <div class="flex-box noBorder" style="width:100%;">
                    <div class="flex-row s noBorder">
                        <div class="row-label space">名称</div>
                        <div class="row-value space">{{  info.targetName || 'IC 贵重仓库'  }}</div>
                    </div>
                    <div class="flex-row s noBorder">
                        <div class="row-label space">编号</div>
                        <div class="row-value space">{{ info.checkCode || '20241232414' }}</div>
                    </div>
                    <div class="flex-row s noBorder">
                        <div class="row-label space">位置</div>
                        <div class="row-value space">{{ info.attrName || 'A 栋IC贵重仓库' }}</div>
                    </div>
                </div>
            </div>
            
        </div>
    </Wrapper>
</template>

<script setup>
    import { ref, onMounted, nextTick } from 'vue';
    import Wrapper from './Wrapper.vue';
    import JsBarcode from 'jsbarcode';
    import CodeImg from '@/assets/barCodeTpl.png';
    import { getFullPath } from '@/api/tpl.js';
    import SVGBarCode from './barCodeSVG.vue';

    const props = defineProps({
        hasName:{ type:Boolean, default:true },
        hasCode:{ type:Boolean, default:true },
        hasLogo:{ type:Boolean, default:true },
        hasPos:{ type:Boolean, default:true },
        isTpl:{ type:Boolean },
        logoPath:{ type:String },
        info:{ type:Object, default:{} },
        labelWidth:{ type:Number }
    })
    
</script>
